<template>
    <view>
        <div class="top">
            <div class="top_button">
                <div class="return" @click="returnPage">
                    <image :src="imageBaseUrl + '/img/return.png'"></image>
                </div>
                <div class="line"></div>
                <div class="homepage" @click="goHome">
                    <image :src="imageBaseUrl + '/img/home.png'"></image>
                </div>
            </div>
            <div>支付</div>
        </div>
        <div class="title">{{ data.name }}</div>
        <div class="total_price">￥{{ data.total_price }}</div>
        <div class="gathering">
            <text style="margin-left: 10px;">收款方</text>
        </div>
        <button class="registers" @click="Alipay">立即支付</button>
        <view class="policy">
            支付安全由中国人民财产保险股份有限公司承保
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import api from '../../api/ticket/index.js';
import config from '../../config/index.js';
const imageBaseUrl = config.image;//图片路径
const data = ref([]);//订单信息
onMounted(() => {
    console.log(uni.getStorageSync('orderInfo'))
    data.value = uni.getStorageSync('orderInfo');//获取订单信息
    console.log(data.value)
})
//  提交
const Alipay = () => {
    api.Alipay({
        scenic_id: 3,//景区id
        ticketing_id: data.value.ticketing_id,//票种id
        user_id: data.value.user_id,//用户id
        time: data.value.time,//时间
        status: 1,//订单状态
        number: data.value.number,//数量
        total_price: data.value.total_price,//总价
    }).then(res => {
        console.log(res)
        if (res.code == 1) {
            uni.setStorageSync('id', res.data)//存储订单id
            console.log(uni.getStorageSync('id'));
            // 跳转
            uni.reLaunch({
                url: '/pages/yeas/yeas'
            });

        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none',
                duration: 2000
            });
        }

    });
}
// 返回
const returnPage = () => {
    uni.navigateBack({
        delta: 1
    });
};

// 主页
const goHome = () => {
    uni.navigateTo({
        url: '/pages/home/home'
    });
};
</script>

<style>
.policy {
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 60px;
    font-size: 14px;
    color: #6e6a6a;
}

.registers {
    width: 94%;
    height: 50px;
    background-color: #1AAD19;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-top: 20px;
    font-size: 18px;
}

.gathering {
    width: 100%;
    height: 40px;
    border-top: 1px solid #d2d0d0;
    border-bottom: 1px solid #d2d0d0;
    margin-top: 30px;
    line-height: 40px;
}

.total_price {
    margin-top: 20px;
    text-align: center;
    font-size: 35px;
}

.title {
    text-align: center;
    margin-top: 50px;
}

.line {
    width: 1%;
    background-color: #8a8a8a;
    height: 70%;
    margin-top: 5%;
}

.return {
    width: 49.5%;
    height: 100%;
    text-align: center;
    line-height: 25px;
}

.return image {
    width: 20px;
    margin-top: 2px;
    height: 20px;
}

.homepage {
    width: 49.5%;
    height: 100%;
    text-align: center;
    line-height: 25px;
}

.homepage image {
    width: 18px;
    margin-top: 3px;
    height: 18px;
}

.top_button {
    width: 70px;
    height: 25px;
    display: flex;
    border-radius: 15px;
    /* margin-top: 30px; */
    margin-left: 20px;
    margin-right: 23%;
    border: 1px solid rgb(192, 192, 192);
}

.top {
    width: 100%;
    height: 50px;
    margin-top: 30px;
    border-bottom: 1px solid rgb(203, 203, 203);
    background-color: rgb(255, 255, 255);
    position: relative;
    color: #8a8a8a;
    display: flex;
    align-items: center;
}
</style>